<template>
  <div class="my-publick-table" style="padding-bottom:20px">
    <el-table v-if="isSlot" v-loading="loading" :data="tableData" :sortable="sortable" border style="width: 100%"
      :max-height="maxHeight" :height="tableHeight" :default-sort="defaultSort"
      @selection-change="handleSelectionChange" @sort-change="sortChange" ref="multipleTableRef">
      <slot />
    </el-table>
    <el-table ref="lazyRef" v-else-if="isLazy === true" :data="tableData" style="width: 100%" row-key="id" border lazy
      :load="load" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" :height="tableHeight">
      <template v-for="(item, index) in listConfig" :key="index">
        <el-table-column v-if="item.type == 'action'" align="left" :label="item.label" :width="item.width || 'auto'"
          :fixed="item.fixed || ''">
          <!-- 操作 -->
          <template #default="scope">
            <el-button v-for="(btnItem, index2) in item.listArr" :disabled="actionLimit([scope.row, btnItem, scope])"
              :key="index2" type="primary" link @click="actionClick(btnItem, scope.row, scope.$index)">{{ btnItem.label
              }}</el-button>
          </template>
        </el-table-column>
        <!-- 需要跳转 -->
        <el-table-column v-else-if="item.type == 'link'" align="left" :label="item.label" :width="item.width || 'auto'"
          :fixed="item.fixed || ''">

          <template #default="scope">
            <el-button link type="primary" @click="linkClick(item.alias, scope.row)">{{ scope.row[item.alias] }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column v-else :align="item.align" :prop="item.alias" :label="item.label" :width="item.width || 'auto'"
          :fixed="item.fixed || null" :min-width="item.minWidth || 0" />
      </template>
    </el-table>
    <el-table v-else :data="tableData" style="width: 100%" @selection-change="handleSelectionChange"
      ref="multipleTableRef" @row-click="rowClick" v-loading="loading" :height="tableHeight" border>
      <el-table-column type="selection" :selectable="selectable" width="55" v-if="showSelect" :fixed="fixedLeft"
        align="center" />
      <el-table-column type="index" width="80" label="序号" v-if="showIndex" align="left" :fixed="fixedLeft" />

      <template v-for="(item, index) in listConfig" :key="index">
        <!-- 需要插入自定义的 -->
        <template v-if="item.type == 'slot'">
          <slot :name="item.alias">
          </slot>
        </template>
        <el-table-column align="left" :label="item.label" :width="item.width || 'auto'" :fixed="item.fixed || null"
          :min-width="item.minWidth || 0" :show-overflow-tooltip="item.showTooltip || null" v-else>
          <!-- 操作 -->
          <template #default="scope" v-if="item.type == 'action'">
            <el-button v-for="(btnItem, index2) in item.listArr" :key="index2" type="primary" link
              @click="actionClick(btnItem, scope.row, scope.$index)"
              :disabled="actionLimit([scope.row, btnItem, scope])">{{
              actionLimitName([scope.row, btnItem]) }}
            </el-button>
          </template>
          <template #default="scope" v-else-if="item.type == 'switch'">
            <el-switch v-model="scope.row[item.alias]"
              @change="switchChange(scope.row[item.alias],scope.row,item.alias)" />
          </template>
          <template #default="scope" v-else-if="item.type == 'tip'">
            <el-tooltip class="box-item" effect="dark" :content="scope.row[item.tipName]" placement="top">
              {{scope.row[item.alias]}}
            </el-tooltip>
          </template>
          <template #default="scope" v-else-if="item.type == 'input' || item.type == 'textarea'">
            <el-input v-model="scope.row[item.alias]" :type="item.type" :placeholder="'请输入' + item.label"
              :maxlength="item.maxlength || 200" />
          </template>
          <template #default="scope" v-else-if="item.type == 'select'">
            <el-select v-model="scope.row[item.alias]" placeholder="请选择" :prop="item.alias"
              @change="selectHandle([item.alias, scope.row[item.alias], scope.$index])">
              <el-option v-for="(item, index) in item.options" :key="index" :label="item.label" :value="item.value" />
            </el-select>
          </template>
          <!-- 需要转换的数据 -->
          <template #default="scope" v-else-if="item.type == 'translateText'">
            <p v-html="translateTextDeal(item, scope.row[item.alias],scope.row)"></p>
          </template>

          <template #default="scope" v-else-if="item.type == 'price'">
            <p>{{ $MoneyFormat(scope.row[item.alias]) }}</p>
          </template>
          <!-- 显示图片 -->
          <template #default="scope" v-else-if="item.type == 'icon'">
            <el-image style="width: 50px; height: 50px" :src="scope.row[item.alias]" />
          </template>
          <!-- 需要跳转 -->
          <template #default="scope" v-else-if="item.type == 'link'">
            <el-button link :loading="linkLoading" @click="linkClick(item.alias,scope.row)" type="primary">{{
              scope.row[item.alias]}}</el-button>
          </template>
          <!-- 时间转换 -->
          <template #default="scope" v-else-if="item.type == 'date'">
            <p>
              {{ scope.row[item.alias] ? dayjs(scope.row[item.alias]).format(item.format || 'YYYY-MM-DD HH:mm:ss'):''}}
            </p>
          </template>
          <!-- 普通列 -->
          <template #default="scope" v-else>{{ scope.row[item.alias] }}</template>
        </el-table-column>
      </template>
    </el-table>
    <el-pagination v-if="showPageSize" :current-page="pageData.pageNum" :page-sizes="[10, 20, 50, 100]"
      :page-size="pageData.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="Number(pageData.total)"
      style="margin-top:18px;display: flex;justify-content: flex-end;" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
  </div>
</template>

<script setup name="PubilcTable">

import { computed, nextTick, onMounted, watch } from 'vue'
import dayjs from 'dayjs'
defineOptions({ name: 'PubilcTable', autoImport: true })
const props = defineProps({
  isSlot: {
    type: Boolean,
    default: false
  },
  defaultSort: {
    type: Object,
    default: () => { }
  },
  sortable: {
    type: Boolean,
    default: false
  },
  sortChange: {
    type: Function,
    default: () => null
  },
  maxHeight: {
    type: String,
    default: 'auto'
  },
  linkLoading: {
    type: Boolean,
    default: false
  },
  loading: {
    type: Boolean,
    default: false
  },
  tableData: {
    type: Array,
    default: () => []
  },
  listConfig: {
    type: Array,
    default: () => []
  },
  pageData: {
    type: Object,
    default: () => {
      return { page: 1, size: 10, total: 0 }
    }
  },
  isLazy: {
    type: Boolean,
    default: false
  },
  getLazyCild: {
    type: Function,
    default: (id) => {
      return data
    }
  },
  showIndex: {
    type: Boolean,
    default: false
  },
  showSelect: {
    type: Boolean,
    default: false
  },
  isDisabled: {
    type: Function
  },
  slectLimit: {
    type: String,
    default: ''
  },
  translateTextDeal: {
    type: Function,
    default: (data) => {
      return data
    }
  },
  showPageSize: {
    type: Boolean,
    default: true
  },
  // 行操作按钮权限，默认全部显示
  actionLimit: {
    type: Function,
    default: () => {
      return false
    }
  },
  selectable: {
     type: Function,
    default: () => true
  },
  // 行操作按钮名称
  actionLimitName: {
    type: Function,
    default: ([data, item]) => {
      return item.label
    }
  },
  tableHeight: {
    type: Number,
    default: null
  }
})

const maps = ref(new Map())
const lazyRef = ref(null)

const resetLazyTree = (item) => {
  const store = lazyRef.value.store
  //判断是父还是子
  if (item.hasChildren) {
    //父对象删除
    const fatherList = store.states.data.value
    //删除
    const delIndex = fatherList.findIndex(i => item.id === i.id)
    fatherList.splice(delIndex, 1)
  } else {
    //子对象删除
    const childList = store.states.lazyTreeNodeMap.value[item.parentId]
    //删除
    const delIndex = childList.findIndex(i => item.id === i.id)
    childList.splice(delIndex, 1)
  }
}

const emit = defineEmits(['on-action', 'on-linkClick', 'on-selectChange', 'on-selectHandle', 'on-switchChange', 'on-rowClick'])
// 操作点击事件
const actionClick = (item, row, index) => {
  emit('on-action', [item, row, index])
}
// 跳转点击事件
const linkClick = (item, row) => {
  emit('on-linkClick', [item, row])
}
// 页数选择
const handleSizeChange = val => {
  emit('on-action', ['pageSize', val])
}
// 当前页码
const handleCurrentChange = val => {
  emit('on-action', ['pageNum', val])
}
const multipleTableRef = ref([])

// 多选 事件
const handleSelectionChange = (list, index) => {
  emit('on-selectChange', list)
  if (props.slectLimit != '' && list.length > props.slectLimit) {
    multipleTableRef.value.clearSelection()
  }
}
// 下拉选择事件
const selectHandle = ([filedName, val, index]) => {
  emit('on-selectHandle', [filedName, val, index])
}

// 展开下一级
const load = (
  tree,
  treeNode,
  resolve
) => {
  const pid = tree.id
  maps.value.set(pid, { tree, treeNode, resolve })
  props.getLazyCild(tree.id).then((res) => {
    if (res && res.length > 0) {
      resolve(
        res
      )
    } else {
      resolve([])
    }
  })
}
const switchChange = (val, row, alias) => {
  emit('on-switchChange', [val, row, alias])
}

const rowClick = (row, column, event) => {
  emit('on-rowClick', [row, column, event])
}

const fixedLeft = computed(() => {
  return props.listConfig.some(item => item.fixed == 'left')
})

defineExpose({
  resetLazyTree,
  multipleTableRef
})

</script>

<style lang="scss">
// scss
.my-publick-table {
  .el-table.is-scrolling-left.el-table--border .el-table-fixed-column--left.is-last-column.el-table__cell {
    border-right: none;
  }

  .el-table th.el-table__cell.is-leaf,
  .el-table td.el-table__cell {
    border-right: none;
  }

  .el-table--border::before {
    display: none;
  }

  .el-table--border::after {
    display: none;
  }

  .el-table--border::after,
  .el-table--border::before,
  .el-table--border .el-table__inner-wrapper::after,
  .el-table__inner-wrapper::before {
    display: none;
  }

  .el-table__border-left-patch {
    display: none;
  }

  .el-table--group .el-table__inner-wrapper tr:first-child td:first-child,
  .el-table--group .el-table__inner-wrapper tr:first-child th:first-child,
  .el-table--group .el-table__footer-wrapper tr:first-child td:first-child,
  .el-table--group .el-table__footer-wrapper tr:first-child th:first-child,
  .el-table--border .el-table__inner-wrapper tr:first-child td:first-child,
  .el-table--border .el-table__inner-wrapper tr:first-child th:first-child,
  .el-table--border .el-table__footer-wrapper tr:first-child td:first-child,
  .el-table--border .el-table__footer-wrapper tr:first-child th:first-child {
    border-right: none;
    border-left: none
  }

  .el-scrollbar__bar {
    display: block !important;
  }
}
</style>
